<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }
        .layout {
            margin-bottom: 15px;
            height: 150px;
            background-color: blueviolet;
            background-clip: content-box;
        }

        .layout article {
            background-color: lightcoral;
            color: #fff;
            width: 320px;
            height: 100px;
            text-align: center;
        }

        /* absolute+margin负值偏移布局 */

        .layout.absolute {
            position: relative;
        }

        .layout.absolute  article {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -160px;
        }

        /* absolute+transform布局 */
        .layout.transform {
            position: relative;
        }

        .layout.transform article {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        /* flex布局 */
        .layout.flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* table-cell布局 */
        .layout.table-cell {
            display: table;
            width: 100%;
        }

        .layout.table-cell .outer {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .layout.table-cell article {
            margin: 0 auto;
            overflow: auto;
        }

        /* grid布局 */
        .layout.grid{
            display: grid;
        }

        .layout.grid article {
            justify-self: center;
            align-self: center;
        }

        /* inline-block布局 */
        .layout.inline-block {
            text-align: center;
        }

        .layout.inline-block::after {
            content: '';
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        .layout.inline-block article {
            display: inline-block;
            vertical-align: middle;
        }


        /* absolute + margin-auto */
        .layout.margin-auto {
            position: relative;
        }

        .layout.margin-auto article{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        /* line-height 布局 */
        .layout.line-height {
            line-height: 150px;
        }

        .layout.line-height article {
            display: inline;
            margin:  auto;
        }

    </style>
</head>
<body>
    <section class="layout absolute">
        <article>
            <p>
                1.absolute+margin负值偏移<br>
                （父容器要设置宽高，需要知道子容器宽高）
            </p>
        </article>
    </section>

    <section class="layout transform">
        <article>
            <p>2.absolute+transform<br>
                （父容器要设置宽高）
            </p>
        </article>
    </section>

    <section class="layout flex">
        <article>
            <p>3.flex<br>（自适应）</p>
        </article>
    </section>

    <section class="layout table-cell">
        <div class="outer">
            <article>
                <p>
                    4.table-cell<br>（多1个容器，注意边距重叠）
                </p>
            </article>
        </div>
    </section>

    <section class="layout grid">
        <article>
            <p>5.grid<br>（自适应,要考虑兼容性）</p>
        </article>
    </section>

    <section class="layout inline-block">
        <article>
            <p>6.inline-block<br>（自适应）</p>
        </article>
    </section>

    <section class="layout margin-auto">
        <article>
            <p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p>
        </article>
    </section>

    <section class="layout line-height">
        <article>
            <p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p>
        </article>
    </section>
</body>
</html>